import React from "react";
import TodoItemCreator from "./TodoItemCreator";
import styles from "../css/TodoList.module.css";
import TodoListStatus from "./TodoListStatus";

import { useRecoilValue } from "recoil";

import { todoListState, timeFormatedTodoListState,todoListFilteredItem } from "../store";
import TodoItem from "./TodoItem";
import TodoListFilter from "./TodoListFilter";
export default function TodoList() {
  const todoList = useRecoilValue(todoListFilteredItem);
  console.log(todoList);
  return (
    <>
      <TodoItemCreator />
      <div className={styles.container}>
        <div className={styles.leftArea}>
          <h4>项目列表</h4>
          {todoList.map((it, index) => (
            <TodoItem key={index} item={it} />
          ))}
               <TodoListFilter/>
        </div>
        <div className={styles.rightArea}>
          <h4>项目状态</h4>
          <TodoListStatus />
        </div>
      </div>
    </>
  );
}
